@-webkit-keyframes ge-roll {
	from {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	to {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}
@keyframes ge-roll {
	from {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	to {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}
.ge-player{
	background: #fff;
	box-shadow: 0 0 10px gray;
	border-radius: 3px;
	position: relative;
	max-width: 400px;
	.button {
		cursor: pointer;
		&:hover,&.active {
			color: dodgerblue;
		}
	}
	.image {
		position: absolute;
		width: 130px;
		height: 130px;
		left: 10px;
		top: 10px;
		-webkit-animation: ge-roll 8s linear infinite;
		animation: ge-roll 8s linear infinite;
		-webkit-animation-play-state: paused;
		animation-play-state: paused;
		img {
			width: 100%;
			height: 100%;
			border-radius: 50%;
		}
	}
	.ge-roll {
		-webkit-animation-play-state: running;
		animation-play-state: running;
	}
	.buttons {
		position: absolute;
		top: 10px;
		right: 10px;
		&>.button {
			margin-left: 5px;
		}
	}
	.control {
		padding: 30px 10px 10px 150px;
		height: 150px;
		text-align: center;
		i {
			margin: 10px;
			font-size: 30px;
		}
	}
	.lyric {
		text-align: center;
		color: brown;
		font-size: .8em;
		height: 2em;
	}
	.progress{
		padding: .5em 1em;
		@bar-color: silver;
		@cur-color: white;
		@played-color: brown;
		@bar-height: 2px;
		@cur-height: 10px;
		@cur-width: 10px;
		.wrap {
			position: relative;
		}
		.barwrap {
			padding: (@cur-height - @bar-height) / 2 0;
		}
		.bar {
			height: @bar-height;
			background: @bar-color;
			position: relative;
		}
		.played {
			position: absolute;
			top: 0;
			height: @bar-height;
			background: @played-color;
		}
		.cursor{
			cursor: pointer;
			position: absolute;
			border: 1px solid @bar-color;
			background: @cur-color;
			border-radius: 50%;
			width: @cur-width;
			height: @cur-height;
			top: 0;
			margin-left: -@cur-width / 2;
		}
		.time{
			font-size: .7em;
			position: absolute;
			right: 0;
			top: -2em;
		}
	}
	.playlist{
		max-height: 200px;
		border-top: 1px dashed gray;
		padding: .5em 1em;
		overflow-y: auto;
		&.hide {
			display: none;
		}
		&>div{
			white-space: nowrap;
			text-overflow: ellipsis;
			color: #1a1a1a;
			cursor: pointer;
			&.active{
				color: dodgerblue;
				font-weight: bold;
			}
			&:hover{
				color: orange;
				font-weight: bold;
			}
		}
	}
}
